<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
</head>
<style>
.bigbox{
    display: flex;
    width: 400px;
    height: 600px;
    margin: auto;
    background-color: aquamarine;
}
.box1{
    width: 300px;
    height: 30px;
    margin-top: 100px;
    margin-left: 50px;
    background-color: bisque;
   
}
.box2{
    width: 300px;
    height: 30px;
    margin-top: 150px;
    margin-left: -300px;
    background-color: bisque;
   
}
.input{
    width: 300px;
    height: 30px;
}
.box3{
    width: 300px;
    height: 30px;
    margin-top: 200px;
    margin-left: -300px;
    background-color: bisque;
}
.denglu{
    width: 300px;
    height: 30px;
}
.box4{
    width: 300px;
    height: 30px;
    margin-top: 250px;
    margin-left: -300px;
    background-color: bisque;
}

</style>
<body>
<div class="bigbox">
    <div class="box1">
        <input type="text" class="input" id="nc" placeholder="请输入昵称" >
    </div>
    <div class="box2">
        <input type="text" class="input" id="zcsrk" placeholder="请输入手机号码/qq/w微信号">
    </div>

    <div class="box3">
        <input type="text" class="input" id="zcmmk" placeholder="请输入密码" >
    </div>
    <div class="box4">
        <button class="denglu" onclick="zhuce()">注册</button>
    </div>
</div>
</body>
<script>
    function zhuce() {
            // 获取文本输入框的值
            const inputData = document.getElementById('zcsrk').value;
            // 将获取到的数据以键 'storedData' 存储到本地存储中
            localStorage.setItem('zhanghao', inputData);
        }
</script>
</html>